<!DOCTYPE html>
<html>
	<head>
	<meta content="text/html; charset=utf-8"/>
	<title>Form elements</title>
</head>
<body>

	<div data-role="page" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
            <span class="ui-app-title">Be inspired by WP8</span>
		    <h1>Form elements</h1>
	    </div>

	<div data-role="content" data-theme="a">
        <div data-role="fieldcontain">
            <label for="name">Text Input</label>
            <input type="text" name="name" id="name" value="" />
        </div>

        <div data-role="fieldcontain">
            <label for="textarea">Textarea</label>
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        </div>

        <div data-role="fieldcontain">
            <label for="search">Search Input</label>
            <input type="search" name="password" id="search" />
        </div>

        <div data-role="fieldcontain">
            <label for="slider">Slider</label>
            <input type="range" name="slider" id="slider" value="7" min="0" max="100"  />
        </div>


        <div data-role="fieldcontain">
            <label for="slider2">Switch</label>
            <select name="slider2" id="slider2" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </div>
        
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Checkboxes</legend>
                <input type="checkbox" name="checkbox-1a" id="checkbox-1a" class="custom" />
                <label for="checkbox-1a">Cheetos</label>

                <input type="checkbox" name="checkbox-2a" id="checkbox-2a" class="custom" disabled='disabled' checked="checked" />
                <label for="checkbox-2a">Doritos</label>

                <input type="checkbox" name="checkbox-3a" id="checkbox-3a" class="custom" />
                <label for="checkbox-3a">Fritos</label>

                <input type="checkbox" name="checkbox-4a" id="checkbox-4a" class="custom" />
                <label for="checkbox-4a">Sun Chips</label>
            </fieldset>
        </div>
        
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Horizontal checkboxes</legend>
                <input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
                <label for="checkbox-6">b</label>

                <input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
                <label for="checkbox-7"><em>i</em></label>

                <input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
                <label for="checkbox-8">u</label>
            </fieldset>
        </div>
        
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Radio buttons</legend>
                <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" />
                <label for="radio-choice-1">Cat</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" checked="checked" disabled='disabled' />
                <label for="radio-choice-2">Dog</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
                <label for="radio-choice-3">Hamster</label>

                <input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4"  />
                <label for="radio-choice-4">Lizard</label>
            </fieldset>
        </div>

        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>Horizontal radio buttons</legend>
                <input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" />
                <label for="radio-choice-c">List</label>
                <input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
                <label for="radio-choice-d">Grid</label>
                <input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
                <label for="radio-choice-e">Gallery</label>
            </fieldset>
        </div>

    </div>
</div>
</body>
</html>
